<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        #outer{
        width: 800px;
        height: 450px;
        border: solid 2px red;
        margin: 0 auto;}

        #main{
            width: 800px;
            height: 450px;
            overflow: hidden;
            position: absolute;
        }
        img{width: 800px;
        height: 450px;}

        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 3200px;
            height: 450px;

        }

        ul li{
            list-style:none;
            float: left;
        }

        #prev{
            width: 40px;
            height: 60px;
            background: skyblue;
            font-size: 40px;
            font-weight: bold;
            position: absolute;
            left: 10px;
            top: 45%;
            z-index: 100;
            text-align: center;
            line-height: 60px;
            display: none;
        }
        #prev:hover{
            display: block;
        }

        #next{
            width: 40px;
            height: 60px;
            background: skyblue;
            font-size: 40px;
            font-weight: bold;
            position: absolute;
            right: 10px;
            top: 45%;
            z-index: 100;
            text-align: center;
            line-height: 60px;
            display: none;

        }
        #next:hover{
            display: block;
        }
        .ts{
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            border-radius: 10px;
        }



    </style>
</head>
<body onload="setInterval(startMove,2400);">
<div style="width: 800px;height: 50px;font-size:30px;margin: auto;">
    原神 启动
</div>
<div id="outer">
    <div style="position: absolute;left: 1050px;top: 480px;z-index: 10">
    <span class="ts" style="background-color: red;">1</span>&nbsp;
    <span class="ts" style="background-color: rosybrown">2</span>&nbsp;
    <span class="ts" style="background-color: rebeccapurple;">3</span>&nbsp;

    </div>
    <div id="main">

        <div id="prev" onclick="moveToPrev()"><</div>
        <div id="next" onclick="moveToNext()">></div>
        <ul id="box" onmouseover="showButton()" onmouseout="hideButton()">
            <li><img src="imgs/水神.png"/></li>
            <li><img src="imgs/可莉.png"/></li>
            <li><img src="imgs/多喝热水.png"/></li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
    var imgCount=3;
    var imgWidth=800;
    var i=1;
    var t=document.getElementsByClassName("ts")
    function startMove(){
        var box=document.getElementById("box");
        if (box.offsetLeft<=-1*imgWidth*(imgCount-1)){
            moveToStart();
        }
        else {
            moveToNext();
        }
    }
    function moveToNext(){
        box.style.transition="all 2s ease-in-out";
        box.style.left=box.offsetLeft-imgWidth+"px";
        i=i+1;
        setts();
    }
    function moveToPrev() {
        i=i-1;
        box.style.transition="all 2s ease-in-out";
        box.style.left=box.offsetLeft+imgWidth+"px";
        setts();

    }
    function moveToStart() {
        box.style.transition="all 2s ease-in-out";
        box.style.left=box.offsetLeft+(imgCount-1)*imgWidth+"px";
        i=1;
        setts();
    }
    function showButton() {
        document.getElementById("prev").style.display="block";
        document.getElementById("next").style.display="block";

    }
    function hideButton() {
        document.getElementById("prev").style.display="上一张";
        document.getElementById("next").style.display="下一张";

    }
    function setts() {
        for (var n=0;n<t.length;n++){
            t[n].style.backgroundColor="#ff0000";
        }
        t[i-1].style.backgroundColor="#00ff00";
    }
</script>